import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, Col, Menu, Row } from 'antd';
import PopoverDescription from '@/components/CustomElement/PopoverDescription/index';
import StatisticsCard from '@/components/CustomElement/StatisticsCard';
import { arrayRemoveRepeat, arraySum } from '@/util/arrayUtil';
import RankList from '@/components/CustomElement/RankList';
import {
    dateToString,
    formatTimeFromNow,
    getDataType,
    getFileSuffixName,
    getUrlQueryParams,
    splicingParams,
} from '@/util/util';
import { getObjectValues, transformedObjectToArray } from '@/util/objectUtil';
import CustomModal from '@/components/CustomElement/CustomModal';
import { JSONTemplateForm } from '@/components/CustomElement/JSONTemplateForm';
import { ProForm } from '@ant-design/pro-form';
import DateFormat, { toUTCDate } from '@/components/CustomElement/DateFormatter';
import { demoFiles, demoObject, rankData, repeatArray, templateForm } from '@/pages/data';
import { targetSumNumber } from '@/util/leetcode';
import { BubbleButton } from '@/components/CustomElement/BubbleButton';
import CustomSpace from '@/components/CustomElement/CustomSpace';

const Welcome: React.FC = () => {
    const [visible, setVisible] = React.useState<boolean>(false);
    console.log(arrayRemoveRepeat(repeatArray, 'id'));

    console.log(getDataType(''), 'getDataType');

    console.log(getUrlQueryParams(), 'getUrlQueryString');

    console.log(getFileSuffixName(demoFiles), 'fileSuffixName');

    console.log(transformedObjectToArray(demoObject), 'objectToObjArray');

    console.log(getObjectValues(demoObject), 'getObjectValues');

    console.log(targetSumNumber());

    console.log(formatTimeFromNow('2022-08-05 01:00:00'));

    console.log(toUTCDate('2022-06-08 18:13:22'));

    console.log(dateToString(new Date()));

    console.log(arraySum([0.1, 0.2]), '0.1, 0.2, 0.3');

    console.log(splicingParams('url', { id: 1 }));

    const buttons = (
        <Menu
            onClick={(menu) => {
                const { key } = menu;
                console.log(key, '--------------');
            }}
            items={[
                {
                    key: '1',
                    label: <a target="_blank">1st menu item</a>,
                },
                {
                    key: '2',
                    label: <a target="_blank">2nd menu item</a>,
                },
                {
                    key: '3',
                    label: <a target="_blank">3rd menu item</a>,
                },
            ]}
        />
    );
    return (
        <PageContainer>
            <Card>
                <BubbleButton buttons={buttons} />
                <div />
                <PopoverDescription
                    content={[
                        { label: '商户名称', text: <a>商户名称</a> },
                        { label: '商户名称2', text: '商户名称2' },
                    ]}
                    position={'right'}
                >
                    测试popover list展示
                </PopoverDescription>

                <div style={{ height: 1, backgroundColor: 'black', margin: '12px 0' }} />

                <StatisticsCard title={'title'} content={'content'} description={'description'} />

                <div style={{ height: 1, backgroundColor: 'black', margin: '12px 0' }} />

                <Button type={'primary'} onClick={() => setVisible(true)}>
                    打开确认弹窗
                </Button>

                <div style={{ height: 1, backgroundColor: 'black', margin: '12px 0' }} />

                <Row gutter={24}>
                    {[1, 2, 3].map((item: number) => {
                        return (
                            <Col span={8} key={item}>
                                <RankList data={rankData} />
                            </Col>
                        );
                    })}
                </Row>

                <div style={{ height: 1, backgroundColor: 'black', margin: '12px 0' }} />

                <CustomModal.Confirm
                    modalVisible={visible}
                    onCancel={() => setVisible(false)}
                    footerButton={[
                        <Button key={'cancel'} onClick={() => setVisible(false)}>
                            取消
                        </Button>,
                        <Button key={'sure'} type={'primary'} onClick={() => setVisible(false)}>
                            确定
                        </Button>,
                    ]}
                    alertProps={{
                        // show: false,
                        message: '你确定要润么',
                    }}
                >
                    <div style={{ textAlign: 'center' }}>这是一个特别的提示</div>
                </CustomModal.Confirm>

                <CustomSpace direction={'horizontal'} bordered={true} height={24} />

                <DateFormat date={'2022-05-20 05:49:05'} formatStr={'YYYY-MM-DD HH:mm:ss'} />

                <div style={{ height: 1, backgroundColor: 'black', margin: '12px 0' }} />

                <ProForm
                    layout={'vertical'}
                    onFinish={(value) => {
                        console.log(value);
                        return Promise.resolve();
                    }}
                >
                    <JSONTemplateForm
                        namePrefix={'gg'}
                        form={false}
                        readonly={false}
                        template={templateForm}
                    />
                </ProForm>
            </Card>
        </PageContainer>
    );
};

export default Welcome;
